{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href={% static "lib/css/bootstrap.css" %}>
    <link rel="stylesheet" href={% static "css/base.css" %}>
    <link rel="stylesheet" href={% static "css/index.css" %}>
    <script src={% static "lib/jquery/jQuery.js" %}></script>
    <script src={% static "lib/js/bootstrap.js" %}></script>
    <script src={% static "js/index.js" %}></script>
    {% block css_js %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>

<body>
<!-- 大屏状态下nav -->
<div class="huge hidden-sm hidden-xs">
    <div id="topbar">
        <div class="container">
            <div class="l">
                <p>在线时间08:30-21:30</p>
                <p>欢迎访问家电在线商城</p>
            </div>
            <div class="r">
                {% if not user.is_authenticated %}
                    <a href={% url 'user:login' %}>登录</a>
                    <a href={% url 'user: register' %}>注册</a>
                {% else %}
                    <img src="/static/media/touxiang.jpg" width="35" alt="">
                    <a href="{% url "user:user_info" %}">欢迎{{ user.username }}</a>
                    <a href="{% url 'user:logout' %}">退出</a>
                {% endif %}


                <a href='{% url 'cart:carts' %}' class="cart"><i class="glyphicon glyphicon-shopping-cart"></i><span
                        class="badge">{{ cart_count }}</span>
                </a>
            </div>
        </div>
    </div>
    <nav>
        <div class="container">
            <img src={% static "media/logo.png" %} alt="">
            <ul>
                <li><a href="{% url 'goods:index' %}" {% if goods_type == '首页' %}class="active"{% endif %}>首页</a></li>
                <li><a href="{% url 'goods:goods_sort' '笔记本' 1 %}"
                       {% if goods_type == '笔记本' %}class="active"{% endif %}>笔记本</a></li>
                <li><a href="{% url 'goods:goods_sort' '台式机' 1 %}"
                       {% if goods_type == '台式机' %}class="active"{% endif %}>台式机</a></li>
                <li><a href="{% url 'goods:goods_sort' '配件' 1 %}" {% if goods_type == '配件' %}class="active"{% endif %}>外设系列</a>
                </li>
                <li><a href="" {% if goods_type == '售后' %}class="active"{% endif %}>售后服务</a></li>
            </ul>
            <form action="/computer/search" method="get">
                <input type="text" name="q" placeholder="游戏笔记本">
                <button type="submit">提交</button>
            </form>
        </div>
    </nav>
</div>


<!-- 小屏幕下nav -->
<div class="lettle hidden-lg hidden-md">
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="btn"><i class="glyphicon glyphicon-align-justify"></i></div>
            <div class="logo"><img src={% static "media/logo.png" %} alt="" width="110" class="img-responsive"></div>
            <div class="search"><i class="glyphicon glyphicon-search" data-toggle="modal" data-target="#search"></i>
            </div>
        </div>
        <!-- 左侧隐藏框 -->
        <div class="slideRight">
            <div class="s_head">
                {% if not user.is_authenticated %}
                    <!-- 未登录状态 -->
                    <a href={% url 'user:login' %}>登录</a>
                    <a href={% url 'user: register' %} class="register">注册</a>
                    <!-- /未登陆状态 -->
                {% else %}
                    <!-- 已登陆状态 -->
                    <a href='' class="touxiang"><img src="/static/media/touxiang.jpg" width="50"
                                                     alt=""><span style="color: hotpink;">欢迎{{ user.username }}</span>
                    </a>
                    <a href='' class="has_cart"><i class="glyphicon glyphicon-shopping-cart"></i></a>
                    <!-- /已登陆状态 -->
                {% endif %}


            </div>
            <div class="s_logo"><img src={% static "media/logo.png" %} height="50" alt=""></div>
            <ul class="s_list">
                <li><a href="{% url 'goods:index' %}">首页</a></li>
                <li><a href='{% url 'cart:carts' %}'>我的购物车</a></li>
                <li><a href="{% url 'goods:goods_sort' '笔记本' 1 %}">笔记本</a></li>
                <li><a href="{% url 'goods:goods_sort' '台式机' 1 %}">台式机</a></li>
                <li><a href="{% url 'goods:goods_sort' '配件' 1 %}">外设系列</a></li>
                <li><a href="">售后服务</a></li>

            </ul>
        </div>
    </div>
</div>
<input type="hidden" name="" id="slider_num" value="2">


<div class="fixnav hidden-sm hidden-xs">
    <div class="fix_tel"><i class="glyphicon glyphicon-earphone"></i>
        <p>18337252813</p>
    </div>
    <div class="bling"><i class="glyphicon glyphicon-bell"></i></div>
    <div class="reback"><i class="glyphicon glyphicon-upload"></i></div>
</div>
{% block web_body %}
{% endblock %}

<!-- 模态框（Modal） -->
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title" id="myModalLabel">
                    搜索
                </h4>
            </div>
            <div class="modal-body">
                <form action="/computer/search" method="get">
                    <div class="input-group">
                        <input type="text" name="q" placeholder="游戏笔记本">

                        <span class="input-group-addon glyphicon glyphicon-search"></span>
                    </div>

                    <div class="modal-footer">

                        <button type="submit" class="btn btn-primary">
                            搜索
                        </button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- /模态框 --> 
<footer>
    <div class="top hidden-sm hidden-xs">
        <div class="container">
            <dl>
                <dd>三年免费保修</dd>
                <dd>三年免费保修</dd>
                <dd>三年免费保修</dd>
                <dd>三年免费保修</dd>
                <dd>三年免费保修</dd>
            </dl>
            <table class="table">

                <thead>
                <tr>
                    <th>帮助中心</th>
                    <th>服务支持</th>
                    <th>关于我们</th>
                    <th>新闻资讯</th>
                    <th>线下门店</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><a href="#">购物指南</a></td>
                    <td><a href="#">保修政策</a></td>
                    <td><a href="#">公司介绍</a></td>
                    <td><a href="#">营业执照</a></td>
                    <td><a href="#">法律申明</a></td>
                </tr>
                <tr>
                    <td><a href="#">支付方式</a></td>
                    <td><a href="#">服务标准</a></td>
                    <td><a href="#">加入我们</a></td>
                    <td><a href="#">新闻动态</a></td>
                    <td><a href="#">隐私政策</a></td>
                </tr>
                <tr>
                    <td><a href="#">配送方式</a></td>
                    <td><a href="#">退换货政策</a></td>
                    <td><a href="#">联系我们</a></td>
                    <td><a href="#">版权申明</a></td>
                    <td><a href="#">服务条款</a></td>
                </tr>

                </tbody>
            </table>

            <div class="contact">
                <div class="wechat">
                    <p>微信公众号</p>
                    <img src={% static "media/wechat.jpg" %} alt="">
                </div>
                <div class="phone">
                    <h4>4006-999-999</h4>
                    <h6>周一至周日 8:00-18:00</h6>
                    <a href="#">24小时在线服务</a>
                </div>
            </div>
        </div>

    </div>
    <div class="bottom">
        <div class="container">
            <p>版权所有2056-2086 数码家电在线商城模板 沪ICP备000000000号-0</p>
        </div>
    </div>
</footer>


</body>
{% block end_js %}{% endblock %}

</html>